import React, { Component } from 'react'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'

import { PieChart  } from 'echarts/charts'

// 注册必须的组件
echarts.use([
  PieChart
])

export default class PieCharts extends Component {
  componentDidMount() {
    const myChart = echarts.init(document.querySelector('.pie-charts'))
    const option = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
          data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
      },
      series: [
          {
              name: '访问来源',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              label: {
                  position: 'inner',
                  fontSize: 14,
              },
              labelLine: {
                  show: false
              },
              data: [
                  {value: 1548, name: '搜索引擎'},
                  {value: 775, name: '直达'},
                  {value: 679, name: '营销广告', selected: true}
              ]
          },
          {
              name: '访问来源',
              type: 'pie',
              radius: ['45%', '60%'],
              labelLine: {
                  length: 30,
              },
              label: {
                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                  backgroundColor: '#F6F8FC',
                  borderColor: '#8C8D8E',
                  borderWidth: 1,
                  borderRadius: 4,
                  
                  rich: {
                      a: {
                          color: '#6E7079',
                          lineHeight: 22,
                          align: 'center'
                      },
                      hr: {
                          borderColor: '#8C8D8E',
                          width: '100%',
                          borderWidth: 1,
                          height: 0
                      },
                      b: {
                          color: '#4C5058',
                          fontSize: 14,
                          fontWeight: 'bold',
                          lineHeight: 33
                      },
                      per: {
                          color: '#fff',
                          backgroundColor: '#4C5058',
                          padding: [3, 4],
                          borderRadius: 4
                      }
                  }
              },
              data: [
                  {value: 1048, name: '百度'},
                  {value: 335, name: '直达'},
                  {value: 310, name: '邮件营销'},
                  {value: 251, name: '谷歌'},
                  {value: 234, name: '联盟广告'},
                  {value: 147, name: '必应'},
                  {value: 135, name: '视频广告'},
                  {value: 102, name: '其他'}
              ]
          }
      ]
  }
    myChart.setOption(option)
  }
  render() {
    return (
      <div
        className="pie-charts"
        style={{
          width: '100%',
          minWidth: 800,
          height: '100%',
        }}
      >
        
      </div>
    )
  }
}
